{include file="header.tpl"}

<div class="main">
    <h1>Проект {$project->title}</h1>

    <div class="spacer" style="padding-bottom: 5px"></div>

    {$wiki}
    
    <div class="spacer" style="padding-bottom: 5px"></div>

    <div class="column column1" id="column1">
    
        <ul class="menu-options">
        <li>
            <a href="/project/{$project->name}/docs/" class="options"><img src="/media/images/page_white_php.png" /> Документация</a>
        </li>
        <li>
            <a href="/project/{$project->name}/code/" class="options"><img src="/media/images/code_inspect.png" /> Інспектор коду</a>
        </li>
        <li>
        {literal}
            <a href="#" onclick="javascript: $.blockUI({ overlayCSS: { backgroundColor: '#AAA' }, css: { top: '20%', border: 'none', backgroundColor: 'transparent' }, message: $('#mdl1') }); return false;" class="options"><img src="/media/images/cog_edit.png" /> Опции проекта</a>
        {/literal}
        </li>
        </ul>
	</div>
	<div class="column column2" id="column2" >
		<div class="dragbox" id="item4" >
			<h2><span class="rss"><a href="#" onclick="return false;"></a></span>Покриття</h2>
			<div class="dragbox-content" style="text-align: center">
				{$img_tests}
			</div>
		</div>
		<div class="dragbox" id="item2" >
			<h2><span class="configure" ><a href="#" onclick="return false;">Configure</a></span>Handle 2</h2>

			<div class="dragbox-content" >
				Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. Etiam arcu eros, placerat sed rhoncus at, porta et elit. Aenean pharetra ante neque. Aenean id egestas orci. Suspendisse potenti. Nunc at magna leo, sed porta erat. Proin eget neque turpis, vel blandit massa. Donec vel tortor magna. Curabitur id nibh magna, nec hendrerit nibh. 
			</div>
		</div>
		<div class="dragbox" id="item3" >
			<h2>Тести</h2>
			<div class="dragbox-content" >
				Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. Nam sed mauris vitae justo convallis placerat. Curabitur viverra, ipsum id volutpat sollicitudin, mi nisi condimentum nulla, nec dapibus velit libero eget orci. Nam purus lectus, imperdiet pharetra pulvinar ac, sodales sit amet sem. Ut vel mollis ante. Vivamus consectetur varius risus eu hendrerit. Sed scelerisque euismod leo, quis accumsan justo venenatis eu. Ut risus lorem, aliquet id fermentum nec, auctor ut enim. Ut pretium elementum turpis vel dignissim. 
			</div>

		</div>

	</div>
	<div class="column column2" id="column3" >
        <div class="dragbox" id="item1" >
            <h2>Документація</h2>
            <div class="dragbox-content" >

              <div>
                  <table>
                  {foreach from=$tree key=key item=item}
                  {include file="elements/doctree.tpl" key=$key tree=$item}
                  {/foreach}
                  </table>
              </div>

            </div>
        </div>

		<div class="dragbox" id="item5" >
			<h2>Handle 5</h2>
			<div class="dragbox-content" >

        {literal}    
        <form class="zf" action=".">
			<dl>
				<dt><label for="input-name">Имя</label></dt>
				<dd><input class="zf" type="text" name="name" id="input-name" onclick="return { oRequired : { iMin : 5 } }" /></dd>
			</dl>

			<dl>
				<dt><label for="input-email">Эл. адрес</label></dt>
				<dd><input class="zf" type="text" name="email" id="input-email" onclick="return { oValid : { sType : 'email' } }" /></dd>
			</dl>
			<dl>
				<dt><label for="input-text">Текст</label></dt>
				<dd><textarea class="zf" rows="3" cols="20" name="text" id="input-text" onclick="return { oOptions : { iMaxLength : 100 } }"></textarea></dd>

			</dl>
			<div class="zf-buttons">
				<input class="zf zf-submit" type="submit" value="Отправить" />
			</div>
		</form>
        {/literal}
            
            
			</div>
		</div>
	</div>
	
	<div class="spacer"></div>
    
    {include file="elements/popup.tpl"}
    
	{literal}
	<script type="text/javascript" >
	$(function(){
		$('.dragbox')
		.each(function(){
			$(this).hover(function(){
				$(this).find('h2').addClass('collapse');
			}, function(){
				$(this).find('h2').removeClass('collapse');
			})
			.find('h2').hover(function(){
				$(this).find('.configure').css('visibility', 'visible');
			}, function(){
				$(this).find('.configure').css('visibility', 'hidden');
			})
			.dblclick(function(){
				$(this).siblings('.dragbox-content').toggle();
			})
			.end()
			.find('.configure').css('visibility', 'hidden');
		});
		$('.column').sortable({
			connectWith: '.column',
			handle: 'h2',
			cursor: 'move',
			placeholder: 'placeholder',
			forcePlaceholderSize: true,
			opacity: 0.4,
			stop: function(event, ui){
				$(ui.item).find('h2').click();
				var sortorder='';
				$('.column').each(function(){
					var itemorder=$(this).sortable('toArray');
					var columnId=$(this).attr('id');
					sortorder+=columnId+'='+itemorder.toString()+'&';
				});
				//alert('SortOrder: '+sortorder);
				/*Pass sortorder variable to server using ajax to save state*/
			}
		})
		.disableSelection();
	});
	</script>
	{/literal}

</div>
{include file="footer.tpl"}